import { useNoteStore } from "@/store/Stores";
import { useEffect } from "react";
import { Input } from "reactstrap";
import { useWant } from "taehui-ts/fe-utilities";

export default function SrcInput() {
  const { wantInput, setWantInput, setLastWant } = useNoteStore();

  const { want, setWant } = useWant("/note");

  const onWant = () => {
    setWant(wantInput);
  };

  useEffect(() => {
    setWantInput(want);
  }, [setWantInput, want]);

  useEffect(() => {
    setLastWant(want);
  }, [setLastWant, want]);

  return (
    <Input
      type="search"
      value={wantInput}
      onChange={({ target: { value } }) => {
        setWantInput(value);
      }}
      onKeyDown={({ key }) => {
        if (key === "Enter") {
          onWant();
        }
      }}
    />
  );
}